<!--vue模板-->
<template>
    <el-dialog
      :model-value="visible"
      :title="user.id ? '修改产品' : '添加产品'"
      :close-on-click-modal="false"
      class="root"
      @close="close"
    >
      <!--基本信息-->
      <div class="basic">
        <el-row>
          <el-col :span="3">产品编码:</el-col>
          <el-col :span="9">
            <el-input  placeholder="请输入产品编码" v-model="user.code" 
          /></el-col>
        </el-row>
        <el-row>
          <el-col :span="3">产品名称:</el-col>
          <el-col :span="9">
            <el-input  placeholder="请输入产品名称" v-model="user.name"
          /></el-col>
        </el-row>
        <el-row>
          <el-col :span="3">价格:</el-col>
          <el-col :span="9">
            <el-input  placeholder="请输入产品价格" v-model="user.price"
          /></el-col>
        </el-row>
        <el-row>
          <el-col :span="3">规格:</el-col>
          <el-col :span="9">
            <el-select  class="m-2" placeholder="请选择产品规格" v-model="user.num"> 
              <el-option
                v-for="item in productoptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="3">是否启用:</el-col>
          <el-col :span="9">
            <el-switch
              v-model="user.status"
              :active-value="1"
              :inactive-value="0"
          /></el-col>
          </el-row>
          <el-row>
          <el-col :span="3">备注:</el-col>
          <el-col :span="9">
            <el-input placeholder="请输入备注" v-model="user.note"
          /></el-col>
        </el-row>
      </div>
  
      <!--账号信息-->
      
  
      <!--按钮-->
      <div class="btn">
        <el-button type="primary" @click="save">保存</el-button>
        <el-button style="margin-left: 60px" @click="close">取消</el-button>
      </div>
    </el-dialog>
  </template>
  
  <!--vue 组件选项定义-->
  <script setup>
  import { ref, defineProps, defineEmits, onMounted } from "vue";
  import { saveProduct,updateProduct } from "@/utils/api";
  import { ElMessage } from "element-plus";
  
  //声明事件  关闭事件
  const emits = defineEmits(["close", "refreshData"]);
  
  //定义属性
  const props = defineProps({
    visible: {
      type: Boolean,
      required: true,
      default: false,
    },
  });
  
  const tmpdept = ref("");
  let isUsernameExist = false; //默认用户名是可用的
  
  const productoptions = ref([]); //产品规格列表
  const user = ref({
    code: "",
    name: "",
    price: "",
    num: "",
    status: 1,
    createUser: "",
    note: "",
  });
  
  //声明初始方法
  function init(data) {
    if (data) {
      //说明是修改
      user.value = data;
    } else {
      //说明是新增 将user的值还原成默认的
      user.value = {
        code: "",
        name: "",
        price: "",
        num: "",
        status: 1,
        createUser: "",
        note: "",
      };
    }
    console.log(data);
  }
  
  //当部门发生变化时
  function chg(v) {
    let tmp = v.split("!");
    user.value.deptId = tmp[0];
    user.value.deptNo = tmp[1];
  }
  
  //查询部门
  async function queryDept() {
    const res = await queryAllDept();
    if (res.code == 1) {
      deptoptions.value = res.data;
    }
  }
  
  //保存
  function save() {
    let promise;
    if (user.value.id) {
      //修改用户
      promise = updateProduct(user.value);
    } else {
      //新增用户
      if (isUsernameExist) {
        //说明用户名存在
        ElMessage({
          message: "该用户名已占用！",
          type: "warning",
        });
        return;
      }
      promise = saveProduct(user.value);
    }
  
    promise.then((res) => {
      if (res.code == 1) {
        ElMessage({
          message: "保存成功",
          type: "success",
        });
        //关闭
        close();
        //通知父组件更新数据
        emits("refreshData");
      }
    });
  }
  
  //检查用户名是否唯一
  function checkuser() {
    //判断用户名是否为空
    if (user.value.username == "") {
      ElMessage({
        message: "用户名不能为空！",
        type: "warning",
      });
      return;
    }
  
    //去后台检测唯一
    checkUser({ username: user.value.username }).then((res) => {
      if (res.code == 200) {
        if (res.data == 1) {
          //说明用户名存在
          ElMessage({
            message: "该用户名已占用！",
            type: "warning",
          });
          isUsernameExist = true;
        } else {
          isUsernameExist = false;
        }
      }
    });
  }
  
  //关闭弹框
  function close() {
    //抛出事件 父组件 同时传递值
    emits("close", false);
  }
  /**************生命周期********* */
  onMounted(() => {
 
  });
  
  //暴露方法
  defineExpose({ init });
  </script>
  
  <!--vue样式 scoped当前样式只适用于当前组件-->
  <style scoped>
  .basic {
    width: 100%;
    border: #eee solid 1px;
    padding: 5px;
  }
  :deep(.el-row) {
    display: flex;
    align-items: center;
    margin: 15px 0;
  }
  :deep(.el-col-3) {
    text-align: center;
  }
  .btn {
    text-align: center;
    margin-top: 20px;
  }
  </style>
  